<template>
	<view>
		<view class="address-section">
			<!-- <mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker"
				:pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker> -->
			<view class="row b-b">
				<text class="tit">联系人</text>
				<input class="input" type="text" v-model="addressData.realname" placeholder="收货人姓名"
					placeholder-class="placeholder" />
			</view>
			<view class="row b-b">
				<text class="tit">手机号</text>
				<input class="input" type="number" v-model="addressData.mobile" placeholder="收货人手机号码"
					placeholder-class="placeholder" />
			</view>
			<view class="row b-b">
				<text class="tit">区域</text>
				<!-- <input class="input" type="text" v-model="addressData.pickerText" disabled="true"
					placeholder-class="placeholder" /> -->

				<view class="" style="width:200rpx!important;font-size: 15px;">
					<Region :defaultValue="defaultValue" @change="onChangeRegion"></Region>
				</view>
			</view>

			<view class="row b-b">
				<text class="tit">地址</text>
				<input class="input" type="text" v-model="addressData.address" placeholder="详细地址"
					placeholder-class="placeholder" />
				<!-- <text @click="chooseLocation" class="input">
				{{addressData.addressName}}
			</text>
			<text class="yticon icon-shouhuodizhi"></text> -->
			</view>
			<!-- <view class="row b-b">
				<text class="tit">门牌号</text>
				<input class="input" type="text" v-model="addressData.area" placeholder="楼号、门牌(选填)"
					placeholder-class="placeholder" />
			</view> -->
			<view class="row default-row">
				<text class="tit" style="display: flex;align-items: center;">设为默认</text>
				<switch :checked="addressData.default" color="#e80909" @change="switchChange" />
			</view>
			<button class="add-btn" @click="confirm">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import Region from '@/components/region/region.vue';
	export default {
		components: {
			Region
		},
		data() {
			return {
				title: '',
				id: 0,
				defaultValue: [],
				addressData: {
					realname: '',
					mobile: '',
					address: '',
					area: '',
					default: false
				}
			}
		},
		onLoad(option) {
			//判断是否登录
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}

			if (option.type === 'edit') {
				this.addressData = JSON.parse(option.data)

				this.addressData.area = this.addressData.area_id
				if (this.addressData.status == 1) {
					this.addressData.default = true;
				} else {
					this.addressData.default = false;
				}

				this.defaultValue = this.addressData.area_arr
			}

		},
		computed: {
			...mapState(['hasLogin']),
		},
		methods: {
			...mapMutations(['login', 'logout']),

			onChangeRegion(region) {
				let id = 0;
				let area = [];
				if (region[2].id > 0) {
					id = region[2].id;
					area = [region[0].name, region[1].name, region[2].name];
				} else {
					id = region[1].id;
					area = [region[0].name, region[1].name, ''];
				}
				this.defaultValue = area;
				this.addressData.area = id;
			},

			switchChange(e) {
				this.addressData.default = e.detail.value
			},

			//地图选择地址
			// chooseLocation() {
			// 	uni.chooseLocation({
			// 		success: (data) => {
			// 			this.addressData.addressName = data.name;
			// 			this.addressData.address = data.name;
			// 		}
			// 	})
			// },

			//提交
			async confirm() {
				if (!this.hasLogin) {
					this.islogin = true
					return false;
				}
				let dataObj = this.addressData;
				if (!dataObj.realname) {
					this.$api.msg('请填写收货人姓名');
					return;
				}
				if (!/(^1[3|4|5|7|8|9][0-9]{9}$)/.test(dataObj.mobile)) {
					this.$api.msg('请输入正确的手机号码');
					return;
				}
				if (!dataObj.area) {
					this.$api.msg('请选择区域');
					return;
				}
				if (!dataObj.address) {
					this.$api.msg('请输入详细地址');
					return;
				}

				dataObj.token = uni.getStorageSync('token')
				let res = await this.$myRequest({
					url: '/editAddress',
					data: dataObj,
					methods: 'post'
				})

				if (res.data.status == 1) {
					uni.$emit('changeAddress')
					this.$api.msg(res.data.msg);
					setTimeout(() => {
						uni.navigateBack({
							delta:1
						})
					}, 1000)
				}
			}
		},
	}
</script>

<style lang="scss">
	page {
		background: #f1f1f1;
		// padding-top: 16upx;
	}

	.row {
		display: flex;
		// align-items: center;
		position: relative;
		padding: 20rpx;
		height: 100%;
		background: #fff;
		border-bottom: 1rpx solid #e5e5e5;

		// margin-top: 10rpx;
		.tit {
			flex-shrink: 0;
			width: 120upx;
			font-size: 30upx;
			color: #303133;
		}

		.input {
			flex: 1;
			font-size: 30upx;
			color: #303133;
		}

		.icon-shouhuodizhi {
			font-size: 36upx;
			color: #909399;
		}
	}

	.default-row {
		margin-top: 20upx;

		.tit {
			flex: 1;
		}

		switch {
			transform: translateX(16upx) scale(.9);
		}
	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: 32upx;
		letter-spacing: 4upx;
		color: #fff;
		background-color: #e80909;
		border-radius: 50upx;
		box-shadow: 1px 2px 5px #dadada;
	}
</style>
